<%@ page pageEncoding="utf-8" %>
<%@include file="/commons/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<fmt:bundle basename="res">
<head>
    <meta charset="utf-8">
    <title><fmt:message key='ttbl' /></title>
    <jsp:include page="/WEB-INF/commons/commons-header.jsp" flush="true"/>
    <style>
        html {
            background: #fff;
        }
    </style>
</head>

<body>
<div class="layui-container">
    <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">

        <form:form commandName="giftActivity" method="${_method }" class="layui-form" id="form">
            <input type="hidden" name="_method" value="${_method }"/>
            <form:hidden path="id"/>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='zphdmc' /></label>
                <div class="layui-input-block">
                    <form:input path="name" class="layui-input" lay-verify="required" placeholder="<fmt:message key='hdmc' />" style="width: 200px;"/>
                </div>
            </div>

            <div class="layui-form-item feijin-zenpin-area">
                <label class="layui-form-label"><fmt:message key='zp' /></label>
                <div class="layui-input-block">
                    <table class="layui-table" lay-size="sm" id="feijin-sku-table">
                        <thead>
                        <tr>
                            <th><fmt:message key='spbh' /></th>
                            <th><fmt:message key='spmc' /></th>
                            <th><fmt:message key='sptp' /></th>
                            <th><fmt:message key='kc' /></th>
                            <th><fmt:message key='cz' /></th>
                        </tr>
                        </thead>
                        <tbody id="giftGoodsArea">

                        <c:if test="${_method eq 'PUT'}">

                            <c:forEach items="${giftGoodses}" var="item">

                                <tr data-id='${item.goods.id}' class='feijin-giftGoods-ids'>
                                    <td>${item.goods.goodsNo}</td>
                                    <td>${item.goods.name}</td>
                                    <td><img class="preview" style="width:40px;height:40px;" src="${store_domain}/uploads/${item.goods.defaultImage}"/></td>
                                </tr>

                            </c:forEach>
                        </c:if>

                        <tr>
                            <td colspan="5">
                                <center><a href="javascript:void(0);" id="chooseGiftGoods" style="color:blue;"><fmt:message key='xzzp' /></a></center>
                            </td>
                        </tr>
                        </tbody>

                    </table>

                </div>
            </div>


            <div class="layui-form-item feijin-validityType-gudin-area">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='zpyxq' /></label>
                <div class="layui-input-block">
                    <form:input path="beginDateOfValidity" class="layui-input" placeholder="<fmt:message key='ksjs' />" readonly="true" style="width: 150px;display:inline;"/> -
                    <form:input path="endDateOfValidity" class="layui-input" placeholder="<fmt:message key='dqjs' />" readonly="true" style="width: 150px;display:inline;"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='mkje' /></label>
                <div class="layui-input-block">
                    <form:input path="standardsAmount" class="layui-input" lay-verify="required" placeholder="<fmt:message key='mkje' />" style="width: 200px;"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='sysplx' /></label>
                <div class="layui-input-block">
                    <input type="radio" name="scopeGoodsType" lay-filter="scopeGoodsType" lay-verify="required" value="1" title="<fmt:message key='suoysp' />" <c:if test="${giftActivity.scopeGoodsType eq 1}">checked="checked"</c:if>/>
                    <input type="radio" name="scopeGoodsType" lay-filter="scopeGoodsType" lay-verify="required" value="2" title="<fmt:message key='zdsp' />" <c:if test="${giftActivity.scopeGoodsType eq 2}">checked="checked"</c:if>/>
                    <input type="radio" name="scopeGoodsType" lay-filter="scopeGoodsType" lay-verify="required" value="3" title="<fmt:message key='zdfl' />" <c:if test="${giftActivity.scopeGoodsType eq 3}">checked="checked"</c:if>/>
                </div>
            </div>


            <div class="layui-form-item" style="display:none;" id="feijin-scopeGoods">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='sysp' /></label>
                <div class="layui-input-block">
                    <table class="layui-table" lay-size="sm">
                        <thead>
                        <tr>
                            <th><fmt:message key='spbh' /></th>
                            <th><fmt:message key='spmc' /></th>
                            <th><fmt:message key='sptp' /></th>
                            <th><fmt:message key='kc' /></th>
                            <th><fmt:message key='cz' /></th>
                        </tr>
                        </thead>
                        <tbody id="feijin-chooseGoods-table">
                        <c:if test="${_method eq 'PUT'}">

                            <c:forEach items="${giftScopes}" var="item">

                                <tr data-id='${item.goods.id}' class='feijin-scopeGoods-ids'>
                                    <td>${item.goods.goodsNo}</td>
                                    <td>${item.goods.name }</td>
                                    <td><img style='width:30px;' src='${store_domain}/uploads/${item.goods.defaultImage}'/></td>
                                </tr>

                            </c:forEach>
                        </c:if>


                        <tr>
                            <td colspan="5">
                                <center><a href="javascript:void(0);" id="chooseGoods" style="color:blue;"><fmt:message key='xzsysp' /></a></center>
                            </td>
                        </tr>
                        </tbody>

                    </table>

                </div>
            </div>

            <div class="layui-form-item" style="display:none;" id="feijin-channels">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='splm' /></label>
                <div class="layui-input-block">
                    <c:if test="${_method eq 'POST'}">
                        <c:forEach items="${channels}" var="item">
                            <input type="checkbox" name="channels" value="${item.id}" title="${item.name}"/>
                        </c:forEach>
                    </c:if>
                    <c:if test="${_method eq 'PUT'}">
                        <c:forEach items="${channels}" var="item">
                            <input type='checkbox' name='channels'
                                   <c:if test="${fn:contains(channelNames, item.name)}">checked="checked"</c:if> value='${item.id}' title='${item.name}'/>
                        </c:forEach>
                    </c:if>
                    <input type="hidden" name="merchantGoodsChannelsData" id="merchantGoodsChannelsData"/>
                </div>

            </div>


            <div class="layui-input-block">
                <div style="display: none">
                    <input type="button" value="<fmt:message key='bc' />" class="layui-btn" id="submit" lay-filter="submit" lay-submit>
                </div>
            </div>

            <input type="hidden" name="giftGoodsesString" id="giftGoodsesString"/>
            <input type="hidden" name="scopeGoodsesString" id="scopeGoodsesString"/>
            <input type="hidden" name="channelsString" id="channelsString"/>

        </form:form>
    </div>
</div>
<script>
    $(function () {

        $(document).on('click', '.removeItem', function () {
            var id = $(this).attr("data-id");
            $("#" + id).remove();
        });

        var id = "${giftActivity.scopeGoodsType}";

        if (id == 1) {
            $("#feijin-scopeGoods").hide();
            $("#feijin-channels").hide();
        }

        if (id == 2) {
            $("#feijin-scopeGoods").show();
            $("#feijin-channels").hide();
        }

        if (id == 3) {
            $("#feijin-scopeGoods").hide();
            $("#feijin-channels").show();

        }

        //选择赠品
        $("#chooseGiftGoods").click(function () {
            layer.open({
                type: 2
                , title: '<fmt:message key='xzsysp' />'
                , content: '${web_domain}/merchant/gift/chooseGiftGoods'
                , maxmin: true
                , area: ['80%', '90%']
                , btn: ['<fmt:message key='qd' />', '<fmt:message key='qx' />']
                , yes: function (index, layero) {

                    var ids = [];

                    layero.find('iframe').contents().find(".feijin-check:checkbox:checked").each(function (index, item) {
                        var id = $(item).val();
                        ids.push(id);
                    });

                    $.ajax({
                        url: "${web_domain}/merchant/gift/queryGoodses?ids=" + ids.join("-"),
                        type: "get",
                        dataType: "json",
                        success: function (result) {
                            if (result.status) {

                                var html = "";

                                $(result.goodses).each(function (index, item) {
                                    html += "<tr id='removeItem" + index + item.id + "' data-id='" + item.id + "' class='feijin-giftGoods-ids' >";
                                    html += "<td >" + item.goodsNo + "</td>";
                                    html += "<td >" + item.name + "</td>";
                                    html += "<td ><img style='width:30px;' src='${store_domain}/uploads/" + item.defaultImage + "' /></td>";
                                    html += "<td >" + item.store + "</td>";
                                    html += "<td ><a href='javascript:void(0);' class='removeItem' data-id='removeItem" + index + item.id + "' >删除</a></td>";
                                    html += "</tr>";

                                });

                                $("#giftGoodsArea").before(html);

                            }
                        }
                    });

                    layer.closeAll();

                }
            });
        });

        //选择适用商品
        $("#chooseGoods").click(function () {
            layer.open({
                type: 2
                , title: '<fmt:message key='xzspsp' />'
                , content: '${web_domain}/merchant/gift/chooseScopeGoodses'
                , maxmin: true
                , area: ['80%', '90%']
                , btn: ['<fmt:message key='qd' />', '<fmt:message key='qx' />']
                , yes: function (index, layero) {

                    var ids = [];

                    layero.find('iframe').contents().find(".feijin-check:checkbox:checked").each(function (index, item) {
                        var id = $(item).val();
                        ids.push(id);
                    });

                    $.ajax({
                        url: "${web_domain}/merchant/gift/queryGoodses?ids=" + ids.join("-"),
                        type: "get",
                        dataType: "json",
                        success: function (result) {
                            if (result.status) {

                                var html = "";

                                $(result.goodses).each(function (index, item) {
                                    html += "<tr id='removeItem" + index + item.id + "'  data-id='" + item.id + "' class='feijin-scopeGoods-ids' >";
                                    html += "<td >" + item.goodsNo + "</td>";
                                    html += "<td >" + item.name + "</td>";
                                    html += "<td ><img style='width:30px;' src='${store_domain}/uploads/" + item.defaultImage + "' /></td>";
                                    html += "<td >" + item.store + "</td>";
                                    html += "<td ><a href='javascript:void(0);' class='removeItem' data-id='removeItem" + index + item.id + "' >删除</a></td>";
                                    html += "</tr>";

                                });

                                $("#feijin-chooseGoods-table").before(html);

                            }
                        }
                    });

                    layer.closeAll();

                }
            });
        });


        layui.use(['form', 'laydate'], function () {

            var form = layui.form;
            var laydate = layui.laydate;

            laydate.render({
                elem: '#beginDateOfValidity',
                format: 'yyyy-MM-dd HH:mm',
                type: 'datetime'
            });

            laydate.render({
                elem: '#endDateOfValidity',
                format: 'yyyy-MM-dd HH:mm',
                type: 'datetime'
            });

            form.on('radio(scopeGoodsType)', function (data) {
                var id = data.value;

                if (id == 1) {
                    $("#feijin-scopeGoods").hide();
                    $("#feijin-channels").hide();
                }

                if (id == 2) {
                    $("#feijin-scopeGoods").show();
                    $("#feijin-channels").hide();
                }

                if (id == 3) {
                    $("#feijin-scopeGoods").hide();
                    $("#feijin-channels").show();

                }
            });

            form.on('submit(submit)', function (data) {

                var giftIds = [];
                $(".feijin-giftGoods-ids").each(function (index, item) {
                    var id = $(item).attr("data-id");
                    giftIds.push(id);
                });

                var scopeIds = [];
                $(".feijin-scopeGoods-ids").each(function (index, item) {
                    var id = $(item).attr("data-id");
                    scopeIds.push(id);
                });


                var goodsChannels = [];
                $("input[name='channels']:checked").each(function (index, item) {
                    goodsChannels.push($(item).val());
                });


                $("#giftGoodsesString").attr("value", giftIds.join("-"));
                $("#scopeGoodsesString").attr("value", scopeIds.join("-"));
                $("#channelsString").attr("value", goodsChannels.join("-"));


                $("#form").ajaxSubmit({
                    success: function (result) {
                        if (result.status) {
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            parent.$("#search").click();
                        } else {
                            layui.use('layer', function () {
                                layer.msg(result.message);
                            });
                        }
                    }
                });
            });

        });

    });
</script>
</body>
</fmt:bundle>
</html>